/**
 * @作者：耿
 * @时间：2022-11-05
 * 1. 前端 react 工程，
    （1）使用 mobx-state-tree 作为状态管理方案，
    （2）体现计算值，
    （3）同步和异步 action，
    （4）驱动 react 视图反映实时状态。
 * 
 */

import { observable, configure, action, runInAction, makeAutoObservable, computed } from 'mobx'
import axios from 'axios'

//面向对象方式初始化 （class 方式）
class CartStore {
    constructor() {
        makeAutoObservable(this)
    }

    @observable is = true  //@ ES7 装饰器语法， java中是注解 
    @observable name = 'geng'
    @observable list = []
    @observable cartProd = []
    //购物车商品总数，计算属性   （2）体现计算值，
    @computed get totalNum() {
        return this.cartProd.length;
    } 

    //（2）体现计算值，
    @observable get totalPrice() {
        return this.cartProd.reduce((total, product) => {
            return total + product.price * product.num;
        }, 0);
    }
    //同步和异步 action，
    @action addCart(product) {
        this.cartProd.push(product)
    }

    @action delCart(product) {
        const index = this.cartProd.findIndex(item => item.id === product.id);
        if (index !== -1) {
            this.cartProd.splice(index, 1);
        }
    }
    //同步和异步 action，
    @action getList() {
        let _this = this;
        axios.get('http://localhost:3000/users').then(
            res => {
                if (res.status === 200) {
                    runInAction(() => {
                        // _this.list = res.data
                        this.list = [{
                            id: 1,
                            name: '耐克鞋子',
                            price: 500,
                            num: 1
                        }, {
                            id: 2,
                            name: '阿迪鞋子',
                            price: 600,
                            num: 1
                        }, {
                            id: 2,
                            name: '李宁鞋子',
                            price: 200,
                            num: 1
                        }, {
                            id: 2,
                            name: '迪卡侬鞋子',
                            price: 300,
                            num: 1
                        }, {
                            id: 2,
                            name: '老北京鞋子',
                            price: 20,
                            num: 1
                        }]

                    })
                }
            },
            err => {
                console.log('err', err)
            }
        )
    }

}

//初始化对象
const cartStore = new CartStore()

export default cartStore